<template>
  <div class="djDetail">
    <div class="top">
      <div class="left">
        <img :src="djDetaillist.picUrl" />
      </div>
      <div class="right">
        <div class="title">
          <el-tag type="danger" size="medium">电台</el-tag>
          <span class="name">{{ djDetaillist.name }}</span>
        </div>
        <div class="user" @click="toUserInfo(users.userId)">
          <img :src="users.avatarUrl" />
          <span class="nickname">{{ users.nickname }}</span>
        </div>
        <div class="btn">
          <el-button-group>
            <el-button size="mini" type="primary" class="iconfont icon-playcircle" @click="playAll"> 播放全部</el-button>
            <el-button type="primary" size="mini" class="iconfont icon-add"></el-button>
          </el-button-group>
          <el-button size="mini" class="iconfont icon-collect"> 订阅({{ djDetaillist.subCount }})</el-button>
          <el-button size="mini" class="iconfont icon-share"> 分享({{ djDetaillist.shareCount }})</el-button>
        </div>
        <div class="info">
          <el-tag effect="plain" size="small">{{ djDetaillist.category }}</el-tag>
          <span class="rcmdtext">{{ djDetaillist.rcmdText }}</span>
        </div>
      </div>
    </div>
    <div class="table">
      <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="'节目(' + count + ')'" name="first">
            <Program :programslist="programslist" :count="count"></Program>
          </el-tab-pane>
          <el-tab-pane :label="'订阅者(' + subCount(djDetaillist.subCount) + ')'" name="second">
            <Suber></Suber>
          </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script>
import { getDjDetail, getProgram } from '../../../network/dj.js'
import { timeFormat } from '../../common/util.js'
import Program from './Program.vue'
import Suber from './Suber.vue'
export default {
  components: {
    Program,
    Suber
  },
  data () {
    return {
      id: 0,
      djDetaillist: {},
      users: {},
      activeName: 'first',
      programslist: [],
      count: 0
    }
  },
  methods: {
    toUserInfo (id) {
      this.$router.push('/user_info/' + id)
    },
    subCount (subCount) {
      if (subCount > 10000) {
        return (subCount / 10000).toFixed(0) + '万'
      } else {
        return subCount
      }
    },
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    playAll () {},
    getDjDetail (id) {
      getDjDetail(id).then(res => {
        // console.log(res.data)
        this.djDetaillist = res.data.djRadio
        this.users = res.data.djRadio.dj
      })
    },
    getProgram (id) {
      getProgram(id).then(res => {
        // console.log(res.data)
        this.count = res.data.count
        res.data.programs.forEach(item => {
          item.duration = timeFormat(item.duration)
        })
        this.programslist = res.data.programs
        // console.log(this.programslist)
      })
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    // console.log(this.id)
    this.getDjDetail(this.id)
    this.getProgram(this.id)
  }
}
</script>

<style lang="less" scoped>
  .djDetail {
    width: 82%;
    overflow: auto;
    .top {
      width: 95%;
      margin: 20px auto 30px;
      display: flex;
      justify-content: flex-start;
      .left {
        width: 20%;
        img {
          width: 100%;
        }
      }
      .right {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        div {
          margin-bottom: 15px;
        }
        .title {
          display: flex;
          align-items: center;
          .el-tag {
            margin-right: 10px;
            background-color: #bd0000;
            color: #fff;
          }
          .name {
            font-size: 25px;
          }
        }
        .user {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
          .nickname {
            color: #666666;
            margin-left: 10px;
          }
        }
        .btn {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .el-button-group {
            margin-right: 10px;
          }
          .el-button {
            font-size: 14px;
          }
        }
        .info {
          display: flex;
          align-items: center;
          .rcmdtext {
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }
    }
    .table {
      width: 95%;
      margin: 0 auto 20px;
    }
  }
</style>
